<template>
    <div class="main">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="URL">
                <el-input v-model="formInline.url" placeholder="请输入URL地址"></el-input>
            </el-form-item>
            <el-form-item label="网址名称">
                <el-input v-model="formInline.name" placeholder="名称"></el-input>
            </el-form-item>
            <el-form-item label="网址类型">
                <el-select v-model="formInline.type" placeholder="类型">
                    <el-option label="握不住掉" value="shanghai"></el-option>
                    <el-option label="我真不知道" value="beijing"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
                <el-button type="primary" @click="onAdd">新增</el-button>
                <el-upload
                        class="upload-demo"
                        action="http://localhost:30001/linkList/batchAddURL.do"
                         accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
                        :limit="1"
                        :on-exceed="handleExceed"
                        :file-list="fileList">
                    <el-button size="small" type="primary">点击上传</el-button>
                    <div slot="tip" class="el-upload__tip">只能上传xlsx文件，且不超过500kb</div>
                </el-upload>


            </el-form-item>
        </el-form>
        <link-table-view :tableData3="urlMessage" @deleteRow="deleteRow"></link-table-view>
    </div>

</template>
<script>
    import LinkTableView from "./linkview/LinkTableView.vue"

    export default {
        data() {
            return {
                FALSE:false,
                fileList:[],
                formInline: {
                    url: '',
                    type: '',
                    name: "",
                },
                urlMessage: []
              }
        },
        methods: {
            onSubmit() {
                //todo:查询的方法，需要在服务端填写
                let self = this;
                self.$axios.get("linkList/getLinks.do",{}).then((data)=>{
                    self.urlMessage = data.data.urlMessage;
                }); 
            },
            onAdd() {
                if(!this.formInline.url){
                    this.$alert("请输入网址");
                    return;
                }
                if (!this.urlMessage.some(val => this.formInline.url == val.url)) {
                    let self = this;
                    self.$axios.post("linkList/addLink.do",self.formInline).then((data)=>{
                        self.urlMessage = data.data.urlMessage;
                    });
                } else {
                    methods: {
                        this.$alert('该网站已添加到书签中', '提示', {
                            confirmButtonText: '确定',
                            callback: action => {
                            }
                        });
                    }
                }

            },
            deleteRow(row) {
                let self = this;
                self.$axios.post("linkList/dealLink.do",row).then((data)=>{
                        self.urlMessage = data.data.urlMessage;
                    });
            },
            handleExceed(files, fileList) {
                this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
            },
        },
        components: {LinkTableView}
    }
</script>
<style scoped="">
    .main {
        padding: 20px;
    }
</style>